<template>
	<div class="footer">
		<div class="ft-content">
			<div class="ft-info-col">
				<dl class="ft-info-col-intro">
					<dd style="font-size: 14px; height: 30px">马蜂窝旅游网</dd>
					<dd>中国年轻一代用得更多的旅游网站</dd>
					<dd>
						上亿旅行者共同打造
						<strong>旅游神器</strong>
					</dd>
					<dd>
						<strong>60,000</strong>
						多个全球旅游目的地
					</dd>
					<dd>
						<strong>600,000</strong>
						个细分目的地新玩法
					</dd>
					<dd>
						<strong>760,000,000</strong>
						次攻略下载
					</dd>
					<dd>
						<strong>38,000</strong>
						家旅游产品供应商
					</dd>
				</dl>

				<dl class="ft-info-col-about">
					<dd style="font-size: 14px; height: 30px">关于我们</dd>
					<dd>
						<a href="http://www.mafengwo.cn/s/about.html">关于马蜂窝</a> &nbsp;
						<a href="http://www.mafengwo.cn/s/contact.html">联系我们</a>
					</dd>
					<dd>
						<a href="http://www.mafengwo.cn/s/private.html">隐私政策</a> &nbsp;
						<a href="http://www.mafengwo.cn/s/logo.html">商标声明</a>
					</dd>
					<dd>
						<a href="http://www.mafengwo.cn/s/agreement.html">服务协议</a>
					</dd>
					<dd>
						<a href="http://www.mafengwo.cn/s/salesagreement.html"
							>商城平台服务协议</a
						>
					</dd>
					<dd>
						<a href="http://www.mafengwo.cn/s/property.html"
							>网络信息侵权通知指引</a
						>
					</dd>
					<dd>
						<a href="http://www.mafengwo.cn/s/monitor.html"
							>马蜂窝旅游网服务监督员</a
						>
					</dd>
					<dd>
						<a href="http://www.mafengwo.cn/s/sitemap.html">网站地图</a> &nbsp;
						<a href="#" style="color: #ff9d00">加入马蜂窝</a>
					</dd>
				</dl>

				<dl class="ft-info-col-service">
					<dd style="font-size: 14px; text-align: center">旅行服务</dd>
					<dd>
						<a href="http://www.mafengwo.cn/gonglve/" target="_blank"
							>旅游攻略</a
						>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="http://www.mafengwo.cn/hotel/" target="_blank">酒店预订</a>
					</dd>
					<dd>
						<a href="http://www.mafengwo.cn/sales/" target="_blank">旅游特价</a>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="http://www.mafengwo.cn/" target="_blank">国际租车</a>
					</dd>
					<dd>
						<a href="http://www.mafengwo.cn/wenda/" target="_blank">旅游问答</a>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="http://www.mafengwo.cn/404.php" target="_blank"
							>旅游保险</a
						>
					</dd>
					<dd>
						<a href="http://z.mafengwo.cn/" target="_blank">旅游指南</a>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="https://m.mafengwo.cn/404.php" target="_blank">订火车票</a>
					</dd>
					<dd>
						<a href="http://www.mafengwo.cn/travel-news/" target="_blank"
							>旅游资讯</a
						>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a
							href="http://www.mafengwo.cn/app/intro/gonglve.php"
							target="_blank"
							>APP下载</a
						>
					</dd>
					<dd>
						<a
							href="https://www.mafengwo.cn/sales/alliance.php"
							target="_blank"
							style="color: #ff9d00"
							>旅行商城全球商家入驻</a
						>
					</dd>
				</dl>

				<dl class="ft-info-col-qrcode">
					<dd>
						<span class="ft-qrcode-tejia"></span>
						<p>马蜂窝良品</p>
						<p>官方服务号</p>
					</dd>
					<dd>
						<span class="ft-qrcode-weixin"></span>
						<p>马蜂窝旅游</p>
						<p>订阅号</p>
					</dd>
					<dd>
						<span class="ft-qrcode-weixin"></span>
						<p>马蜂窝APP</p>
						<p>扫描立即下载</p>
					</dd>
				</dl>
			</div>
			<div class="ft-info-social">
				<p>旅游之前，先上马蜂窝！</p>
				<div class="ft-info-socialer">
					<a href="https://weibo.com/mafengwovip" target="_blank">
						<i class="ft-social-icon"></i>
					</a>
					<a
						href="https://i.qq.com/?s_url=http%3A%2F%2F1213600479.qzone.qq.com%2F"
						target="_blank"
					>
						<span class="ft-social-icons"></span>
					</a>
				</div>
			</div>
			<div class="ft-links">
				<a href="http://china.makepolo.com/">马可波罗</a>
				<a href="http://www.onlylady.com/">Onlylady女人志</a>
				<a href="https://www.elong.com/">艺龙旅游指南</a>
				<a href="https://www.cncn.com/">欣欣旅游网</a>
				<a href="http://www.8264.com/">户外运动</a>
				<a href="#">365音乐网</a>
				<a href="#">爱问共享资料</a>
				<a href="#">旅游网</a>
				<a href="#">小说网</a>
				<a href="#">学习啦</a>
				<a href="#">问答</a>
				<a href="#">驴妈妈旅游网</a>
				<a href="#">好豆美食网</a>
				<a href="#">二手车</a>
				<a href="#">绿野户外</a>
				<a href="#">途牛旅游网</a>
				<a href="#">图吧</a>
				<a href="#">SUV联合越野</a>
				<a href="#">手机浏览器</a>
				<a href="#">上海地图</a>
				<a href="#">天气预报查询</a>
				<a href="#">同程旅游</a>
				<a href="#">火车票</a>
				<a href="#">马蜂窝大学</a>
				<a href="#">马尔代夫旅游</a>
				<a href="#">YunOS</a>
				<a href="#">携程旅游</a>
				<a href="#">锦江旅游</a>
				<a href="#">火车时刻表</a>
				<a href="#">TripAdvisor</a>
				<a href="#">天巡网</a>
				<a href="#">租租车</a>
				<a href="#">酒店预订</a>
				<a href="#">爱旅行网</a>
				<a href="#">旅游</a>
				<a href="#">旅游网</a>
				<a href="#">wed114结婚网</a>
				<a href="#">车讯网</a>
				<a href="#">遨游旅游网</a>
				<a href="#">手机</a>
				<a href="#"> 更多友情链接>></a>
			</div>
			<div class="ft-copyright">
				<a href="#">
					<i class="ft-mfw-logo"></i>
				</a>
				<p>
					© 2022 Mafengwo.cn
					<a href="#">京ICP备11015476号</a>
					<a href="#">
						<img
							src="./images/police_record.png"
							alt=""
							style="width: 12px; margin: 0 2px 4px 0"
						/>
						京公网安备11010502013401号
					</a>
					<a href="#">京ICP证110318号</a>
				</p>
				<p>
					<a href="#">网络出版服务许可证 </a>
					<a href="#">增值电信业务经营许可证</a>
					<a href="#">营业执照 </a>
					<a href="#">广播电视节目制作经营许可证 </a>
					<a href="#">网络文化许可证</a>
					<a href="#">网上有害信息举报专区</a>
					<a href="#">帮助中心</a>
				</p>
				<p>
					<span>
						违法和不良信息举报电话: 010-83416877 举报邮箱: mfwjubao@mafengwo.com
						涉未成年人不良信息专用举报邮箱: wcnrjubao@mafengwo.com
						全国旅游投诉电话：12345
					</span>
				</p>
				<p>
					<span>马蜂窝客服：国内</span>
					<span style="color: #ff9d00">4006-345-678 </span>
					<span>海外</span>
					<span style="color: #ff9d00">+86-10-8341-6888</span>
				</p>
			</div>
			<div class="ft-safety">
				<a href="#" class="s-b"></a>
				<a href="#" class="s-c"></a>
				<a href="#" class="s-d"></a>
				<a href="#" class="s-e"></a>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "HomeFooter",
};
</script>

<style>
body {
	margin: 0;
	padding: 0;
}

.footer {
	/* width: 1423px; */
	width: 100%;
	height: 670px;
	clear: both;
	background-color: #3c3c3c;
	color: #c2c2c2;
	line-height: 22px;
	padding-bottom: 20px;
	font-size: 12px;
}

.ft-content {
	width: 1105px;
	height: 605px;
	margin: 0 auto;
}

.ft-info-col {
	position: relative;
	height: 284px;
	border-bottom: 1px solid #575a5b;
	padding: 30px 8px 40px 8px;
}

.ft-info-col-intro {
	float: left;
	display: inline;
	width: 200px;
	height: 162px;
	margin-right: 68px;
}

.ft-info-col-intro dd {
	font-size: 12px;
	margin: 0;
}

.ft-info-col-intro dd strong {
	color: #ff9d00;
	font-weight: normal;
}

.ft-info-col-about {
	float: left;
	width: 140px;
	height: 184px;
	margin-right: 85px;
}

.ft-info-col-about dd {
	font-size: 12px;
	margin: 0;
}

.ft-info-col-about dd a {
	text-decoration: none;
	color: #c2c2c2;
}

.ft-info-col-service {
	float: left;
	width: 135px;
	height: 162px;
	margin-right: 80px;
}

.ft-info-col-service dd {
	font-size: 12px;
	margin: 0px;
}

.ft-info-col-service dd a {
	text-decoration: none;
	color: #c2c2c2;
}

.ft-info-col-qrcode {
	position: absolute;
	right: 10px;
	width: 400px;
	line-height: 0.5em;
	padding-top: 22px;
}
.ft-info-col-qrcode p {
	margin: 10px 0;
}

.ft-info-col-qrcode dd {
	float: right;
	width: 85px;
  margin-left: 40px;
	text-align: center;
}

.ft-qrcode-tejia {
	display: block;
	width: 94px;
	height: 90px;
	/* margin: 0 0 8px 6px; */
	background: url(./images/qr_tejia.png);
}

.ft-qrcode-weixin {
	display: block;
	width: 94px;
	height: 90px;
	/* margin: 0 0 8px 6px; */
	background: url(./images/qr_weixin.png);
}

.ft-info-social {
	position: relative;
	margin-top: -130px;
	height: 100px;
}

.ft-info-social p {
	font-size: 16px;
	text-align: center;
  margin-bottom: 10px;
}


.ft-info-socialer {
	padding: 5px 0;
}

.ft-social-icon {
	position: absolute;
	left: 500px;
	display: inline-block;
	width: 28px;
	height: 28px;
	background: url(./images/mfw-footer-sprite7.png) no-repeat 0 0;
	overflow: hidden;
	margin: 0 6px;
}

.ft-social-icons {
	position: absolute;
	left: 545px;
	display: inline-block;
	width: 28px;
	height: 28px;
	background: url(./images/mfw-footer-sprite7.png) no-repeat 0 0;
	background-position: -60px 0;
	overflow: hidden;
	margin: 0 6px;
}

.ft-links {
	margin-top: 15px;
	border-bottom: 1px solid #575a5b;
	padding: 17px 0 17px 8px;
}

.ft-links a {
	margin-right: 12px;
	color: #c2c2c2;
	text-decoration: none;
}

.ft-copyright {
	padding: 12px 0 12px 7px;
}

.ft-mfw-logo {
	float: left;
	background: url(./images/mfw-footer-sprite7.png) no-repeat 0 -30px;
	width: 136px;
	height: 39px;
	margin: 2px 20px 0 0;
	overflow: hidden;
}

.ft-copyright a {
	text-decoration: none;
	color: #c2c2c2;
}

.ft-safety {
	text-align: center;
}

.ft-safety .s-b {
	display: inline-block;
	margin-left: 10px;
	width: 90px;
	height: 30px;
	background: url(./images/mfw-footer-sprite7.png);
	background-position: 0 -110px;
	overflow: hidden;
}

.ft-safety .s-c {
	display: inline-block;
	margin-left: 10px;
	width: 90px;
	height: 30px;
	background: url(./images/renzhen.png);
	overflow: hidden;
}

.ft-safety .s-d {
	display: inline-block;
	margin-left: 10px;
	width: 90px;
	height: 30px;
	background: url(./images/manyidu.png);
	overflow: hidden;
}

.ft-safety .s-e {
	display: inline-block;
	margin-left: 10px;
	width: 90px;
	height: 30px;
	background: url(./images/fuwu.png);
	background-size: 100% 100%;
	overflow: hidden;
}
</style>
